


        
        footer{
            color: #b1b3c3;
        }

        main{
            height: 100vh;
            overflow: hidden;
            position: relative;
        }
        main .history{
            height: 100vh;
            width: auto;
        }
        main .history .item{
            width: 100vw;
            height: 100vh;
            flex-shrink: 0;
            position: relative;
        }
        main .history .item .mid>*{
            z-index: 1;
            position: absolute;
        }
        main .history .num{
            font-size: 400px;
            font-weight: 500;
            color: #e9e9eb;
        }
        main .history .item:nth-child(1){
            background: #f3f3f3;
            border: 25px solid #fff;
            border-bottom-width: 60px;
        }
        main .history .itm1 .ttl{
            top: 20%;
            left: 50%;
        }
        main .history .ttl .date{
            color: #1d1e2c;
            font-weight: 400;
            font-size: 11px;
            padding-left: 95px;
            position: relative;
            letter-spacing: 2px;
        }
        main .history .ttl i{
            width: 75px;
            height: 5px;
            background: #1d1e2c;
            left: 0px;
        }
        main .history .ttl .name{
            margin: 17px 0 25px;
            color: #1d1e2c;
            font-weight: bold;
            font-size: 50px;
            line-height: 64px;
        }
        main .history .ttl .des{
            max-width: 360px;
            font-size: 14px;
            line-height: 25px;
        }
        
        main .history .itm1 .num1{
            margin-left: -450px;
            top: 50%;
            left: 50%;
            transform: translateY(-50%);
        }
        main .history .border{
            height: 315px;
            width: 760px;
            border: 5px solid #897053;
            color: #897053;
        }
        main .history .itm1 .border{
            height: 300px;
            width: 220px;
            bottom: 70px;
            left: 50%;
            margin-left: -150px;
            z-index: 3;
        }
        main .history .border .title{
            font-size: 14px;
            line-height: 18px;
            font-weight: 500;
            top: 40px;
            left: 20px;
            position: absolute;
            height: 50px;
            padding-top: 13px;
            padding-left: 10px;
            width: 130px;
            overflow: hidden;
            white-space: nowrap;
        }
        main .history .border .title::before{
            content: '';
            position: absolute;
            top: 0;
            left: 10px;
            width: 45px;
            height: 3px;
            background: #897053;
        }
        main .history .border .no{
            position: absolute;
            font-size: 100px;
            bottom: 35px;
            left: 30px;
            font-weight: 500;
            width: 220px;
            transition: .7s ease-in;
            overflow: hidden;
        }
        main .history .itm1 .pic{
            width: 600px;
            height: 820px;
            left: 50%;
            top: -25px;
            z-index: 2;
        }
        main .history .itm1 .num2{
            right: 0px;
            top: 80px;
        }

        main .history .item:nth-child(2){
            width: 150vw;
        }
        main .history .itm2 .num1{
            margin-left: -950px;
            top: -25px;
            left: 50%;
        }
        main .history .itm2 .num2{
            margin-left: -595px;
            bottom: 75px;
            left: 50%;
        }
        main .history .itm2 .pic1{
            width: 600px;
            height: 525px;
            margin-left: -835px;
            top: 60px;
            left: 50%;
            box-shadow: 0 25px 45px rgb(0 0 0 / 25%);
            z-index: 2;
        }
        main .history .itm2 .txt{
            top: 155px;
            max-width: 310px;
            width: 100%;
            font-size: 14px;
            line-height: 25px;
            color: #686978;
        }
        main .history .itm2 .pic2{
            width: 750px;
            height: 525px;
            left: 1px;
            bottom: 0px;
        }
        main .history .itm2 .pic3{
            margin-left: 275px;
            left: 50%;
            top: 0;
            box-shadow: 0 25px 45px rgb(0 0 0 / 25%);
            z-index: 3;
            width: 600px;
            height: 600px;
        }
        main .history .itm2 .border{
            width: 380px;
            height: 605px;
            border: 5px solid #897053;
            z-index: 2;
            left: 50%;
            margin-left: 715px;
            top: 150px;
        }
        main .history .itm2 .pic4{
            top: 425px;
            left: 50%;
            margin-left: 780px;
            width: 600px;
            height: 375px;
        }
        main .history .itm2 .ttl{
            top: 645px;
            margin-left: 275px;
            left: 50%;
        }
        

        main .history .item:nth-child(3){
            background: #1d1e2c;
            width: calc(100vw + 100vw/3);
        }
        main .history .itm3 .ttl{
            left: 0;
            top: 20%;
            z-index: 5;
            margin-left: 225px;
        }
        main .history .itm3 .ttl>*{
            color: #d5d6e4;
        }
        main .history .itm3 .ttl .date i{
            background: #d5d6e4;
        }
        main .history .itm3 .pic1{
            top: 0;
            left: 50%;
            z-index: 3;
            width: 600px;
            height: 600px;
        }
        main .history .itm3 .pic2{
            width: 1050px;
            height: 600px;
            left: 50%;
            margin-left: -770px;
            bottom: 0;
            
        }
        main .history .itm3 .border{
            left: 50%;
            top: 50px;
            margin-left: -350px;
            z-index: 4;
        }
        main .history .year{
            color: #686978;
            font-weight: lighter;
            font-size: 130px;
        }
        main .history .itm3 .year{
            bottom: 335px;
            left: 50%;
            margin-left: -1000px;
        }
        main .history .itm3 .pic3{
            width: 675px;
            height: 450px;
            top: 50%;
            left: 50%;
            margin-left: 470px;
        }
        main .history .itm3 .num{
            z-index: 2;
            color: #191a27;
        }
        main .history .itm3 .num1{
            bottom: 60px;
            left: 50%;
            margin-left: 260px;
        }
        main .history .itm3 .num2{
            z-index: 3;
            left: 50%;
            margin-left: 600px;
            top: -100px;
        }
        main .history .itm3 .num3{
            right: 470px;
            top: 100px;
        }
        main .history .itm3 .num4{
            bottom: 0px;
            right: 30px;
        }


        main .history .itm4{
            z-index: 2;
            background: #fff;
        }
        main .history .itm4 .pic{
            width: 1350px;
            height: 750px;
            top:0px;
        }
        main .history .itm4 .year{
            left: 50%;
            bottom: 175px;
            margin-left: 480px;
        }
        

        main .timeLine{
            position: absolute;
            z-index: 2;
            bottom: 95px;
            left: 25px;
            width: calc(100% - 50px);
            z-index: 9;
            font-weight: 900;
            font-size: 14px;
            color: #acadbd;
            height: 1px;
            background: #CDCEDE;
            font-weight: bold;
            font-size: 14px;
            line-height: 1;
            white-space: nowrap;
        }
        main .timeLine .process{
            left: 12px;
            position: absolute;
            bottom: 0px;
            width: calc(100% - 140px);
            justify-content: space-between;
        }
        main .timeLine .item{
            position: relative;
        }
        main .timeLine .item i{
            height: 20px;
            width: 1px;
            display: block;
            background: #CDCEDE;
        }
        main .timeLine .item .year,
        main .timeLine .item .name{
            position: absolute;
            left: 13px;
        }
        main .timeLine .item .year{
            bottom: 13px;
        }
        main .timeLine .item .name{
            top: calc(100% + 13px);
        }
        main .timeLine .ing{
            position: absolute;
            background: #686978;
            height: 3px;
            top: 100%;
            left: 0px;
            width: 0%;
        }
        

        @media(max-width:1600px){
            main .history .ttl{
                transform: translateX(-460px);
            }
            main .history .ttl .date{
                padding-left: 70px;
            }
            main .history .ttl i{
                width: 55px;
                height: 4px;
            }
            main .history .ttl .name{
                margin-top: 10px;
                font-size: 38px;
                line-height: 48px;
            }
            main .history .num{
                font-size: 300px;
            }
            main .history .border{
                width: 450px;
                height: 225px;
            }
            main .history .border .title{
                font-size: 12px;
                line-height: 14px;
                top: 35px;
                left: 15px;
                height: 45px;
            }
            main .history .border .title::before{
                width: 33px;
            }
            main .history .border .no{
                font-size: 75px;
                bottom: 15px;
                left: 25px;
            }
            main .history .year{
                font-size: 106px;
            }

            main .history .itm1 .num1{
                margin-left: -320px;
            }
            main .history .itm1 .border{
                width: 220px;
                height: 220px;
            }
            main .history .itm1 .pic{
                width: 435px;
                height: 600px;
            }

            main .history .itm2 .pic1{
                top: 40px;
                margin-left: -650px;
                width: 450px;
                height: 395px;
            }
            main .history .itm2 .num1{
                margin-left: -750px;
            }
            main .history .itm2 .num2{
                margin-left: -415px;
                bottom: -25px;
                left: 50%;
            }
            main .history .itm2 .txt{
                top: 100px;
            }
            main .history .itm2 .pic2{
                width: 560px;
                height: 390px;
            }
            main .history .itm2 .pic3{
                width: 450px;
                height: 450px;
                margin-left: 200px;
            }
            main .history .itm2 .border{
                width: 280px;
                height: 450px;
                margin-left: 530px;
                top: 40px;
            }
            main .history .itm2 .pic4{
                width: 480px;
                height: 280px;
                top: 320px;
                margin-left: 585px;
            }
            main .history .itm2 .ttl{
                margin-left: 200px;
                top: 470px;
            }

            main .history .itm3 .ttl{
                transform: initial;
            }
            main .history .itm3 .year{
                margin-left: -600px;
                bottom: 170px;
            }
            main .history .itm3 .pic2{
                width: 600px;
                height: 315px;
                margin-left: -420px;
            }
            main .history .itm3 .border{
                margin-left: -50px;
            }
            main .history .itm3 .pic1{
                margin-left: 100px;
                width: 450px;
                height: 450px;
            }
            main .history .itm3 .pic3{
                margin-left: 350px;
                width: 500px;
                height: 333px;
            }
            main .history .itm3 .num1{
                margin-left: 200px;
                bottom: 45px;
            }
            main .history .itm3 .num2{
                top: -75px;
                margin-left: 555px;
            }
            main .history .itm3 .num3{
                right: 220px;
                top: 75px;
            }
            main .history .itm3 .num4{
                right: 0px;
            }

            main .history .itm4 .pic{
                width: 1000px;
                height: 555px;
            }
            main .history .itm4 .year{
                bottom: 55px;
                margin-left: 360px;
            }
        }

        @media(max-width:1365px){
            main .history .ttl{
                transform: translateX(-350px);
            }
            main .history .ttl .name{
                margin-bottom: 15px;
                font-size: 28px;
                line-height: 36px;
            }
            main .history .border{
                width: 450px;
                height: 225px;
            }
            main .history .year{
                font-size: 85px;
            }

            
            main .history .itm1 .pic{
                width: 360px;
                height: 495px;
            }

            main .history .itm2 .pic1{
                margin-left: -644px;
                width: 405px;
                height: 355.5px;
            }
            main .history .itm2 .num1{
                margin-left: -650px;
            }
            main .history .itm2 .num2{
                margin-left: -315px;
            }
            main .history .itm2 .pic2{
                width: 443px;
                height: 309px;
            }
            main .history .itm2 .pic3{
                width: 360px;
                height: 360px;
            }
            main .history .itm2 .border{
                width: 224px;
                height: 360px;
                margin-left: 424px;
            }
            main .history .itm2 .pic4{
                top: 256px;
                margin-left: 468px;
                width: 384px;
                height: 224px;
            }
            main .history .itm2 .ttl{
                top: 420px;
            }

            
            main .history .itm3 .year{
                margin-left: -550px;
                bottom: 136px;
            }
            main .history .itm3 .pic2{
                width: 528px;
                height: 302px;
                margin-left: -300px;
            }
            main .history .itm3 .border{
                margin-left: 50px;
            }
            main .history .itm3 .pic1{
                margin-left: 200px;
                width: 405px;
                height: 405px;
            }
            main .history .itm3 .pic3{
                margin-left: 356px;
                width: 400px;
                height: 266px;
            }
            main .history .itm3 .num1{
                margin-left: 174px;
            }
            main .history .itm3 .num2{
                margin-left: 484px;
            }
            main .history .itm3 .num3{
                right: 136px;
            }
            main .history .itm3 .num4{
                right: -100px;
            }

            main .history .itm4 .pic{
                width: 900px;
                height: 500px;
            }
            main .history .itm4 .year{
                bottom: 120px;
                margin-left: 300px;
            }
        }

        .normal main{
            overflow: initial;
        }
        .normal main .timeLine{
            display: none;
        }
        .normal main .history{
            transform: initial !important;
            display: block;
            width: 100%;
            height: initial;
        }
        .normal main .history .ttl{
            transform: initial !important;
            margin-left: 0px !important;
        }
        .normal main .history .ttl .date{
            padding-left: 95px;
        }
        .normal main .history .ttl i{
            width: 75px;
            height: 5px;
        }
        .normal main .history .ttl .name{
            font-size: 40px;
            line-height: 50px;
            margin-bottom: 30px;
            margin-top: 20px;
        }
        .normal main .history .item{
            width: 100% !important;
            height: initial;
        }
        .normal main .history .item .mid{
            padding: 100px 25px;
            max-width:748px;
            margin: 0 auto;
        }
        .normal main .history .item .num{
            font-size: 400px;
        }
        .normal main .history .item .ttl{
            position: initial !important;
        }
        .normal main .history .item .pic{
            position: relative;
            left: initial !important;
            bottom: initial !important;
            top: initial !important;
            transform: initial !important;
        }
        .normal main .history .itm1{
            border-width: 10px;
            border-bottom-width: 0px;
        }
        .normal main .history .itm1 .pic{
            width: 400px;
            height: 550px;
            margin-left: 300px;
            margin-top: 60px;
            top: -25px !important;
        }
        .normal main .history .itm1 .border{
            width: 220px;
            position: relative;
            bottom: 0px;
            height: 300px;
            margin-left: 125px;
            margin-top: -250px;
            left: auto;
        }
        .normal main .history .itm1 .mid{
            padding-top: 150px;
        }
        .normal main .history .itm1 .num1{
            top: 78%;
        }
        

        .normal main .history .itm2{
            background: #f3f3f3;
            border-left: 10px solid #fff;
            border-right: 10px solid #fff;
        }
        .normal main .history .itm1 .num1{
            margin-left: -400px;
        }
        .normal main .history .itm1 .num2{
            top: 50px;
            margin-left: 240px;
            left: 50%;
            transform: translateX(-2.4vw);
        }

        .normal main .history .itm2 .mid{
            padding-top: 0px;
        }
        .normal main .history .itm2 .num1{
            top: -150px;
            margin-left: -80px;
        }
        .normal main .history .itm2 .pic1{
            margin-left: 350px;
            max-width: 385px;
            width: 100%;
            transform: translateX(6.5vw) !important;
        }
        .normal main .history .itm2 .pic2{
            margin-top: -45px;
            margin-left: -25px;
            width: 470px;
            height: 328px;
        }
        .normal main .history .itm2 .txt{
            position: relative;
            top: initial;
            left: initial;
            transform: none;
            max-width: 100%;
            margin-top: 50px;
            z-index: 2;
        }
        .normal main .history .itm2 .txt p + p{
            margin-top: 36px;
        }
        .normal main .history .itm2 .ttl{
            margin-top: 90px;
        }
        .normal main .history .itm2 .num2{
            position: absolute !important;
            margin-left: 30px;
            top: 400px !important;
            transform: translateX(4vw) !important;
        }
        .normal main .history .itm2 .pic3{
            margin-top: 80px;
            margin-left: -25px;
            width: 100%;
            transform: initial !important;
            max-width: 400px;
        }
        .normal main .history .itm2 .border{
            position: relative;
            left: initial;
            top: initial;
            margin-left: 300px;
            margin-top: -445px;
            transform: translateX(3.125vw) !important;
        }
        .normal main .history .itm2 .pic4{
            margin-top: -90px;
            margin-left: 350px;
            transform: translateX(2.5vw) !important;
        }
        
        .normal main .history .itm3 .num{
            display: none;
        }
        .normal main .history .itm3 .border{
            position: relative;
            left: initial;
            top: initial;
            width: 360px;
            margin-left: 100px;
            margin-top: 600px;
        }
        .normal main .history .itm3 .pic2{
            margin-left: 100px;
            margin-top: -750px;
            transform: translateX(.7vw) !important;
        }
        .normal main .history .itm3 .pic1{
            margin-top: 40px;
            margin-left: 280px;
            width: 420px;
            height: 420px;
        }
        .normal main .history .itm3 .year{
            top: 500px;
            margin-left: -40px;
            left: initial;
            bottom: initial;
            transform: translateX(-1.4vw) !important;
        }
        .normal main .history .itm3 .pic3{
            width: 675px;
            height: 450px;
            margin-top: 40px;
            margin-left: 0px;
        }

        .normal main .history .itm4 .mid{
            padding-top: 0px;
            padding-bottom: 130px;
        }
        .normal main .history .itm4 .pic{
            height: 375px;
            max-width: 675px;
            margin: 0 auto;
        }
        .normal main .history .itm4 .year{
            bottom: 130px;
            line-height: .85;
            transform: translate(-24.875vw,50%) !important;
            margin-left: 180px;
        }
        
        .normal footer{
            display: none;
        }
        .normal footer.active{
            display: block;
        }

        @media(max-width:767px){
            .normal main .history .item .num{
                display: none;
            }
            .normal main .history .item .mid{
                max-width: 480px;
            }
            .normal main .history .itm1 .pic{
                width: 300px;
                height: 410px;
                margin-left: 135px;
            }
            .normal main .history .itm1 .border{
                margin-left: 0px;
            }

            .normal main .history .itm2 .pic1{
                max-width: 225px;
                height: 225px;
                margin-left: 225px;
            }
            .normal main .history .itm2 .pic2{
                width: 280px;
                height: 195px;
                margin-top: -30px;
                margin-left: 0px;
            }
            .normal main .history .itm2 .pic3{
                margin-top: 40px;
                margin-left: -25px;
                max-width: 260px;
                height: 260px;
            }
            .normal main .history .itm2 .border{
                height: 250px;
                width: 150px;
                margin-left: 165px;
                margin-top: -280px;
            }
            .normal main .history .itm2 .pic4{
                margin-top: -60px;
                margin-left: 200px;
                width: 260px;
                height: 160px;
            }

            .normal main .history .itm3 .border{
                margin-top: 310px;
                margin-left: 0;
                height: 290px;
            }
            .normal main .history .itm3 .year{
                top: 360px;
                margin-left: -20px;
            }
            .normal main .history .itm3 .pic2{
                width: 390px;
                height: 220px;
                margin-left: 75px;
                margin-top: -555px;
            }
            .normal main .history .itm3 .pic1{
                margin-top: 75px;
                margin-left: 160px;
                width: 300px;
                height: 300px;
            }
            .normal main .history .itm3 .pic3{
                margin-left: 0px;
                width: 100%;
                height: initial;
            }

            .normal main .history .itm4 .mid{
                max-width: initial;
                padding: 0px;
                padding-bottom: 50px;
            }
            .normal main .history .itm4 .pic{
                width: 100%;
                max-width: 90%;
                height: initial;
            }
            .normal main .history .itm4 .year{
                transform: initial !important;
                position: relative !important;
                margin: 0px;
                bottom: 0px;
                left: 0px;
                width: 100%;
                margin-top: -30px;
            }
        }

        @media(max-width:480px){
            .normal main .history .item .mid{
                padding: 50px 25px;
            }
            .normal main .history .item{
                border-width: 0px !important;
            }
            .normal main .history .itm1 .mid{
                padding-top: 100px;
            }
            .normal main .history .ttl .date{
                padding-left: 45px;
            }
            .normal main .history .ttl i{
                width: 30px;
                height: 3px;
            }
            .normal main .history .ttl .name{
                font-size: 20px;
                line-height: 30px;
                margin-bottom: 15px !important;
                margin-top: 10px;
            }
            .normal main .history .item .pic{
                width: 100% !important;
                margin-left: 0px !important;
                transform: initial !important;
                height: auto !important;
                max-width: initial !important;
            }
            .normal main .history .border{
                width: 100% !important;
                transform: initial !important;
            }
            .normal main .history .itm1 .border{
                margin-top: 0px;
            }

            .normal main .history .itm2 .mid,
            .normal main .history .itm4 .mid{
                padding-top: 0px;
            }
            .normal main .history .itm2 .pic1,
            .normal main .history .itm2 .pic3{
                padding-bottom: 100%;
            }   
            .normal main .history .itm2 .pic1 img,
            .normal main .history .itm2 .pic3 img{
                position: absolute;
                top: 0px;
                left: 0px;
            }
            .normal main .history .itm2 .pic2,
            .normal main .history .itm2 .pic4{
                margin-top: 20px;
            }
            .normal main .history .itm2 .ttl{
                margin-top: 45px;
            }
            .normal main .history .itm2 .border,
            .normal main .history .itm3 .year{
                display: none !important;
            }

            .normal main .history .itm3 .border,
            .normal main .history .itm3 .pic2{
                margin-top: 0px;
            }
            .normal main .history .itm3 .border{
                margin-top: 20px;
            }
            .normal main .history .itm3 .mid>*{
                margin-top: 20px !important;
            }
            .normal main .history .itm3 .mid .ttl{
                margin-top:0px !important;
            }

            .normal main .history .itm4 .year{
                margin-left: -25px;
                font-size: 70px;
                margin-top: -30px;
            }
        }